<template>
  <div>
    <el-dialog
      title="网格资源"
      :visible.sync="dialogVisible"
      width="1150px"
      height="800px"
      :modal="false"
      custom-class="deep"
    >
      <div class="gridNameStyle">{{ gridname }}</div>
      <div class="gridAddressStyle">{{ gridaddress }}</div>
      <div class="basicInfo">
        <el-row :gutter="30">
          <el-col :span="12">面积：<span>{{ basicInfo.ACREAGE }}(平方米)</span></el-col>
          <el-col :span="12">户数：<span>{{ basicInfo.DOORS }}(户)</span></el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">居民数：<span>{{ basicInfo.VILLAGERS }}(人)</span></el-col>
          <el-col :span="12">党员：<span>{{ basicInfo.VILLAGERINGSTERS }}(人)</span></el-col>
        </el-row>
      </div>

      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="网格成员" name="first">
          <el-table :data="girdPeople" style="width: 96%" height="300px">
            <el-table-column prop="NAME" label="姓名" width="150">
            </el-table-column>
            <el-table-column prop="GENDER" label="性别" width="100">
            </el-table-column>
            <el-table-column prop="IDENTITY" label="身份"> </el-table-column>
            <el-table-column prop="PHONE" label="电话"> </el-table-column>
            <el-table-column prop="DUTY" label="职务"> </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="重点人员" name="second">
          <el-table :data="importantPeople" style="width: 96%" height="300px">
            <el-table-column prop="NAME" label="姓名" width="150">
            </el-table-column>
            <el-table-column prop="PHONE" label="电话"> </el-table-column>
            <el-table-column prop="TYPE" label="类型"> </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="重点场所" name="third">
          <el-table :data="importantPlace" style="width: 96%" height="300px">
            <el-table-column prop="NAME" label="场所名" width="150">
            </el-table-column>
            <el-table-column prop="ADDRESS" label="场所地址"> </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="房屋" name="fourth">
          <el-table :data="houseTable" style="width: 96%" height="300px">
            <el-table-column prop="ADDRESS" label="房屋地址" width="150">
            </el-table-column>
            <el-table-column prop="ISVACANTHOUSE" label="是否空置房">
            </el-table-column>
            <el-table-column prop="ISRENTALHOUSE" label="是否出租房">
            </el-table-column>
            <el-table-column prop="ISDANGEROUSBUILDING" label="是否危房">
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="企业" name="five">
          <el-table :data="enterpriseTable" style="width: 96%" height="300px">
            <el-table-column prop="NAME" label="企业名称"></el-table-column>
            <el-table-column prop="TYPE" label="企业类型"></el-table-column>
            <el-table-column prop="INDUSTRY" label="所属行业"></el-table-column>
            <el-table-column
              prop="ISRISKENTERPRISE"
              label="是否危化企业"
            ></el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="事件" name="six">
          <el-table :data="eventsTable" style="width: 96%" height="300px">
            <el-table-column prop="content" label="事件描述"></el-table-column>
            <el-table-column
              prop="domainName"
              label="事件类型"
            ></el-table-column>
            <el-table-column prop="status" label="状态"></el-table-column>
            <el-table-column
              prop="occurDateString"
              label="发生时间"
            ></el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
import { gettdinfo } from "../../utils/api";
export default {
  name: "resident",
  data() {
    return {
      gridaddress: "",
      gridname: "",
      basicInfo: {
        VILLAGERINGSTERS: 43,
        DOORS: 435,
        ACREAGE: 3000000,
        VILLAGERS: 1315,
      },
      girdPeople: [],
      importantPeople: [],
      importantPlace: [],
      enterpriseTable: [],
      houseTable: [],
      eventsTable: [],
      dialogVisible: false,
      activeName: "first",
      pid: 0,
      merchant: [],
    };
  },
  mounted() {
    window._yhGirdLayer = this.getData;
  },
  methods: {
    getData(id, gridname, gridaddress) {
      this.gridname = gridname;
      this.gridaddress = gridaddress;
      this.dialogVisible = true;
      var me = this;
      this.pid = id;
      this.activeName = "first";
      gettdinfo("orgCode=" + id).then((res) => {
        if (res.data.status === 200) {
          this.girdPeople = res.data.data[0];
          var temimportantPeople = res.data.data[1];
          for (var i = 0;i<temimportantPeople.length;i++){
            if(temimportantPeople[i].PHONE=="NULL"){
              temimportantPeople[i].PHONE = "暂无联系电话"
            }
          }
          this.importantPeople = temimportantPeople;
          this.importantPlace = res.data.data[3];
          var temhousetable = res.data.data[4];
          for (var i = 0; i < temhousetable.length; i++) {
            temhousetable[i].ISVACANTHOUSE == 0
              ? (temhousetable[i].ISVACANTHOUSE = "否")
              : (temhousetable[i].ISVACANTHOUSE = "是");
            temhousetable[i].ISRENTALHOUSE == 0
              ? (temhousetable[i].ISRENTALHOUSE = "否")
              : (temhousetable[i].ISRENTALHOUSE = "是");
            var a = temhousetable[i].ISDANGEROUSBUILDING;
            if(a==undefined){
              temhousetable[i].ISDANGEROUSBUILDING = "";
            }else if(a == 0){
              temhousetable[i].ISDANGEROUSBUILDING = "否";
            }else{
              temhousetable[i].ISDANGEROUSBUILDING = "是";
            }
          }
          this.houseTable = temhousetable;
          var tementerpriseTable = res.data.data[5];
          for (var i = 0; i < tementerpriseTable.length; i++) {
            tementerpriseTable[i].ISRISKENTERPRISE == 0
              ? (tementerpriseTable[i].ISRISKENTERPRISE = "否")
              : (tementerpriseTable[i].ISRISKENTERPRISE = "是");
          }
          this.enterpriseTable = tementerpriseTable;
          this.eventsTable = res.data.data[2];
          this.basicInfo = res.data.data[6];
        }
      });
    },
    handleClick(tab, event) {},
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.el-dialog__wrapper {
  width: 3096px;
  overflow: unset !important;
}
.el-table {
  background: unset;
  margin-top: 5px;
  margin: auto;
}
.gridAddressStyle {
  color: aquamarine;
  font-size: 16px;
  margin: 10px 50px;
}
.gridNameStyle {
  color: white;
  font-size: 16px;
  margin: 10px 50px;
}
.basicInfo{
  color: white;
  font-size: 16px;
  margin: 10px 50px;
}
.basicInfo .el-col span{
  color: yellow;
  float: right;
}
</style>
